<template>
  <div class="home-root">
    <!-- head -->
    <div class="head">
      <!-- head left title -->
      <div>
        <span
          style="
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            color: aqua;
          "
          >英语练习系统</span
        >
      </div>
      <div style="flex: 1"></div>
      <!-- head right -->
      <div
        style="
          display: flex;
          align-items: center;
          width: fit-content;
          gap: 20px;
        "
      >
        <div>
          <el-button round @click="gotoLearnContentView()"
            >今日学习内容</el-button
          >
        </div>
        <div>
          <el-button round @click="gotoGrammars()">我的语法分析</el-button>
        </div>
        <div>
          <el-button round @click="gotoWordBookList()">单词书</el-button>
        </div>
        <el-dropdown style="padding-right: 40px">
          <span class="el-dropdown-link">
            <span style="font-size: 16px"> {{ userStore.name }} </span>
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goUserInfo()"
                >个人信息</el-dropdown-item
              >
              <el-dropdown-item @click="goUpdatePassword()"
                >修改密码</el-dropdown-item
              >

              <el-dropdown-item divided @click="handleLogout()"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- body -->
    <div class="body-root">
      <!-- body left -->
      <div class="body-left">
        <el-menu default-active="1" class="menu" router :collapse="isCollapse">
          <el-menu-item index="1" route="/dialogue">
            <el-icon><ChatDotRound /></el-icon>
            <template #title>对话</template>
          </el-menu-item>
          <el-menu-item index="2" route="/translate">
            <el-icon><DocumentCopy /></el-icon>
            <template #title>翻译</template>
          </el-menu-item>
          <el-sub-menu index="3" v-if="isAdmin">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span>管理员</span>
            </template>
            <el-menu-item-group title="用户信息管理">
              <el-menu-item index="1-1">用户列表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="聊天信息管理">
              <el-menu-item index="1-2">聊天消息</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="单词书管理">
              <el-menu-item index="1-3">单词书</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <div class="collapse-button" @click="toggleCollapse">
            <el-icon :size="20">
              <Fold v-if="!isCollapse" />
              <Expand v-else />
            </el-icon>
          </div>
        </el-menu>
      </div>
      <!-- body right -->
      <div class="body-right">
        <RouterView class="router" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowDown } from "@element-plus/icons-vue";
import { ref, onMounted, on } from "vue";
//获取token
import { useAuthStore } from "@/stores/auth";
import router from "@/router";
const authStore = useAuthStore();
// 获取用户信息
import { useUserStore, UserInfo } from "@/stores/userStore";
const userStore = useUserStore();
import { httpClient } from "@/libs/http-client";

// 用户是否为管理员
const isAdmin = ref(false);
// 获取用户角色信息
const getUserRole = async () => {
  await httpClient
    .get("/start/getUserRole", { params: { id: userStore.id } })
    .then((data) => {
      console.log("获取用户角色信息成功:", data);
      isAdmin.value = data[1].id == 2;
    })
    .catch((error) => {
      console.error("获取用户角色信息失败:", error);
    });
};

onMounted(async () => {
  // 检查是否有用户信息
  if (userStore.email === "") {
    // 获取用户信息
    await httpClient
      .get("/start/getUserInfo")
      .then((data) => {
        console.log("获取用户信息成功:", data);
        userStore.setUser(data);
      })
      .catch((error) => {
        console.error("获取用户信息失败:", error);
      });
  }
  getUserRole();
});
const isCollapse = ref(true);
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value;
};

// 个人信息
const goUserInfo = () => {
  console.log("跳转到个人信息界面");
  router.push({ path: "/userInfo" });
};

// 修改密码
const goUpdatePassword = () => {
  console.log("跳转到修改密码界面");
  router.push({ path: "/changePassword" });
};

// 退出登录
const handleLogout = async () => {
  console.log("退出登录");
  // 清除token
  authStore.clearToken();
  // 取出邮箱
  const email = userStore.email;
  // 清除用户信息
  userStore.clearUser();
  // 跳转到登录页面
  router.push({ path: "/login", query: { email: email } });
};

// 跳转单词书列表
const gotoWordBookList = () => {
  router.push({ path: "/wordBookList" });
};

// 跳转到我的语法分析视图
const gotoGrammars = () => {
  router.push({ path: "/grammars" });
};

// 跳转到今日学习内容界面
const gotoLearnContentView = () => {
  router.push({ path: "/todayLearnContentView" });
};
</script>

<style scoped>
.home-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.head {
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
}
.body-root {
  flex: 1;
  display: flex;
  width: 100vw;
  height: 100%;
}
.body-left {
  border-right: 1px solid #eee;
}
.body-right {
  flex: 1;
}
.menu {
  height: 100%;
}
.collapse-button {
  position: absolute;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f2f5;
}

.el-menu--collapse .collapse-button {
  right: 50%;
  transform: translateX(50%);
}

.router {
  height: 100%;
}
</style>
